<template>
  <div>
    <div>
      <mu-appbar title="凌晨电影网">
        <mu-icon value="search" color="white" slot="left"></mu-icon>
        <input class="appbar-search-field" id="inp" v-model="query" @keyup.enter="submit()" placeholder="请输入搜索内容">
        <mu-flat-button @click="submit()" label="搜索" slot="right"></mu-flat-button>
      </mu-appbar>
    </div>
    <div class="hot-search">
      <h3>热门搜索</h3>
      <button v-for="item in hotSearch" @click="serch(item.id)" :key="item.id">{{item.name}}</button>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        query: '',
        hotSearch: [
          {name: '建军大业', id: '59cfd9b0934eb12ba8de5230'},
          {name: '神偷奶爸3', id: '59da65b1934eb12ba8de540b'},
          {name: '新木乃伊', id: '59cbe53a934eb12ba8de5164'},
          {name: '海军陆战队员5：杀戮战场', id: '59cfd9b0934eb12ba8de522f'}
        ]
      }
    },
    methods: {
      submit: function () {
        this.$router.push({path: '/searchResult', query: {name: this.query}})
        this.query = ''
      },
      serch: function (str) {
        const path = '/detail/' + str
        this.$router.push({path: path})
      },
      notSubmit: function () {
        window.history.go(-1)
      }
    }
  }
</script>

<style>
  .search-wrap {
    display: flex;
    padding: 10px;
    height: 55px;
    background-color: #009688;
  }

  .search-wrap input {
    flex: 1;
    text-decoration: none;
    border: 1px solid #E5E9F2;
    /*border-radius: 15px;*/
    padding-left: 2em;
    line-height: 25px;
    height: 25px;
  }

  .search-wrap span {
    margin-left: 10px;
    font-size: 15px;
    align-self: center;
    cursor: pointer;
  }

  .hot-search {
    padding: 10px;
  }

  .hot-search h3 {
    font-size: 16px;
  }

  .hot-search button {
    background-color: white;
    border-style: none;
    padding: 5px;
    margin-right: 5px;
    border-radius: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    color: #e54847;
  }

  .appbar-search-field {
    margin-bottom: 0;
    padding-left: 2em;
    width: 100%;
    color: #263238;
    border: 0;
  }
</style>
